<template>
    <el-dialog
        :before-close="handlerClose"
        :title.sync="config[operateType].title"
        :visible.sync="showDialog"
        top="5vh"
        width="50%"
    >
        <el-row>
            <el-col :span="6">{{config[operateType].planSetting}}</el-col>
            <el-col :span="6">
                <div class="empty-box"></div>
            </el-col>
            <el-col :span="12">
                <div class="float-right">
                    <el-button @click="deletePlan">删除方案</el-button>
                    <el-button v-if="operateType==='import'" @click="downloadTemplate">模板下载</el-button>
                    <el-button @click="savePlan">保存方案</el-button>
                </div>
            </el-col>
        </el-row>
        <div style="border: solid 1px #ebebeb;padding: 20px">
            <div>
                <student-field-list
                    @deleteField="handlerDeleteField"
                    @addField="handlerAddField"
                    :fields="fields"
                    :tipFields="tipFields"
                />
            </div>
        </div>

        <el-row :gutter="10" style="margin: 60px auto 0">
            <el-col :span="12">
                <span
                    class="el-button el-button--text el-button--small default-text"
                >{{config[operateType].selectPlan}}</span>
                <el-select>
                    <el-option label="方案1" value="1"/>
                </el-select>
            </el-col>
            <el-col :span="6">
                <div class="empty-box"></div>
            </el-col>
            <el-col :span="6">
                <div class="float-right">
                    <el-button @click="resetPlan">重置</el-button>
                    <el-button @click="doImport" type="primary">{{config[operateType].operateText}}</el-button>
                </div>
            </el-col>
        </el-row>
        <save-or-delete-plan
            @closeSaveOrDelete="showSubDialog=false"
            v-if="showSubDialog"
            :operateType="saveOrDelete"
        ></save-or-delete-plan>
    </el-dialog>
</template>
<script>
import SaveOrDeletePlan from "./SaveOrDeletePlan";
import StudentFieldList from "./StudentFieldList";
export default {
    components: { StudentFieldList, SaveOrDeletePlan },
    props: {
        operateType: {
            type: String,
            required: true
        }
    },
    mounted() {
        console.log(this.operateType);
    },
    data() {
        return {
            showDialog: true,
            //conditions: [],
            fields: [{}],
            tipFields: [],
            saveOrDelete: "",
            showSubDialog: false,
            config: {
                import: {
                    title: "学生信息导入",
                    planSetting: "导入方案设置",
                    selectPlan: "导入方案：",
                    operateText: "导入"
                },
                export: {
                    title: "学生信息导出",
                    planSetting: "导出方案设置",
                    selectPlan: "导出方案：",
                    operateText: "导出"
                }
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            //this.setConditions(this.conditionsArr);
        },
        deletePlan() {
            this.showSubDialog = true;
            this.saveOrDelete = "delete";
        },
        downloadTemplate() {},
        resetPlan() {},
        savePlan() {
            this.showSubDialog = true;
            this.saveOrDelete = "save";
        },
        doImport() {},
        handlerClose(done) {
            this.$emit("closeImportOrExportDialog");
            // done();
        },
        handlerDeleteField(index) {
            this.fields.splice(index, 1);
        },
        handlerAddField(index) {
            this.fields.splice(index, 0, {});
        }
    }
};
</script>
<style>
.default-text {
    color: #606266;
    cursor: auto;
}
.default-text:hover {
    color: #606266;
}
</style>

